<template>
  <div class="news-detail-box">
    <div class="news-detail-box-content">
      <div class="one-box scroll-box">
        <div class="one-box-content">
          <!-- <img :src="detail.img" class="img" alt="" /> -->
          <div class="content-box">
            <div class="top-box">
              <div class="title-box">
                <div class="title">{{ detail.title }}</div>
                <div class="time">{{ detail.time }}</div>
              </div>
            </div>
            <div class="bottom-box" v-html="detail.html"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from '@vue/reactivity'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const detail = reactive({
  id: '1',
  time: '2022-03-28 10:42',
  title: '文章标题文章标题1',
  text: '文章内容文章内容文章Neri',
  html: '<p>asdfsdf</p><p><img src="https://digital-asset.obs.cn-southwest-2.myhuaweicloud.com/test/1649670063484.png" alt="" data-href="" style="width: 100%"/></p><p><br></p><p><br></p>',
  content:
    '[{"type":"paragraph","children":[{"text":"asdfsdf"}]},{"type":"paragraph","children":[{"text":""},{"type":"image","src":"https://digital-asset.obs.cn-southwest-2.myhuaweicloud.com/test/1649670063484.png","href":"","alt":"","style":{},"children":[{"text":""}]},{"text":""}]},{"type":"paragraph","children":[{"text":""}]},{"type":"paragraph","children":[{"text":""}]}]'
})

console.log(route.query.id)

function goFun() {
  router.push({ path: '/home/welcome' })
}
</script>
<style lang="scss">
.news-detail-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}

.news-detail-box-content {
  width: 100%;

  .scroll-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: #fff;
  }

  .one-box {
    width: 1200px;
    min-height: 100%;

    .one-box-content {
      margin: 0 auto;

      .img {
        margin-top: 175px;
      }
    }

    .content-box {
      .top-box {
        margin: 0px 0 40px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-box {
          .title {
            font-size: 24px;
            margin-bottom: 10px;
            font-weight: bold;
            color: #000;
          }

          .time {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.3);
          }
        }

        .title-btn {
          font-size: 14px;
          font-weight: 500;
          color: #2a2a28;
          cursor: pointer;
          width: 150px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }

        .title-btn:hover {
          font-weight: bold;
        }
      }

      .bottom-box {
        font-size: 14px;
        line-height: 2em;
        margin-bottom: 140px;
      }
    }
  }
}

.news-detail-box::-webkit-scrollbar {
  display: none;
}
</style>
